function ajax(options) {
    let xhr = new XMLHttpRequest()

    // 设置默认值
    options.type = options.type || 'get'
    options.async = options.async || true
    options.header = options.header || {
        'Content-Type': 'application/x-www-form-urlencoded'
    }

    // console.log(options.type)
    let arr = []

    for (let attr in options.data) {
        arr.push(attr + '=' + options.data[attr])
    }

    // console.log(arr)
    let str = arr.join('&')
    // console.log(str)

    // 判断是post还是get
    if (options.type === 'get') {
        xhr.open('get', options.url + '?' + str, options.async)
        xhr.send()
    } else {
        xhr.open('post', options.url, options.async)
        // 设置请求头
        for (let attr in options.header) {
            xhr.setRequestHeader(attr, options.header[attr])
        }
        // xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.send(str)
    }


    xhr.onload = function () {
        // 后台来的所有数据都是字符串
        // console.log(xhr.responseText)
        // let obj = JSON.parse(xhr.responseText)
        // console.log(obj)

        // 把拿到的数据返回给 调用函数的人
        // 回调函数
        if (options.success) {
            options.success(xhr.responseText)
        }
    }
}

//---------顶部提示----------//

let qishi_guanbi=document.querySelector('.qishi_guanbi')
let tonggao=document.querySelector('.tonggao')
qishi_guanbi.onclick=()=>tonggao.className='off'
//---------导航区域——————————//
let biaoji=document.querySelector('.biaoji')
let on_off=true
if(on_off){
    biaoji.className='important'
}
let fen_xiang=document.querySelector('.fen_xiang')
let share=document.querySelector('.share')
fen_xiang.onclick=()=>{
    if(on_off){
        share.classList.remove('off')
        on_off=false
    }else{
        share.classList.add('off')
        on_off=true
    }
   }
//---------导航下分期展示栏——————————//
let fenqi_ad=document.querySelector('.fenqi_ad')
let fenqi_ad_small=document.querySelector('.fenqi_ad_small')
let close_one=document.querySelector('.close')
let close_two=document.querySelector('.close_two')
close_one.onclick=()=>{
    fenqi_ad.classList.add('off')
    fenqi_ad_small.classList.remove('off')
}
close_two.onclick=()=>{
    fenqi_ad.classList.remove('off')
    fenqi_ad_small.classList.add('off')
}
//---------商品详情展示——————————//
var lunbo=document.querySelectorAll('.swiper-slide')

ajax({
    url: '../php/list.php',
    
    success(res) {
       //console.log(res)
        var obj=JSON.parse(res)
        console.log(obj.data1)
       
        getDate(obj.data1)
        getDate2(obj)
        }
    })
    function getDate(arr){
        arr.forEach((ele,index) => {
            
            lunbo[index].innerHTML=`<div class="swiper-slide"><img src="${ele.imgUrl}" alt=""></div>`
        });
    }

let colourChoose=document.querySelectorAll('.colourChoose div')
let colour=document.querySelector('.colour')
    let shouJiDaTu=[
       {imgUrl:'../images/商品详情/gold.jpg'},
       {imgUrl:'../images/商品详情/black.jpg'},
       {imgUrl:'../images/商品详情/green.jpg'},
    {imgUrl:'../images/商品详情/purple.jpg'},
    ]


function getDate2(ele){
    let oneImageList=ele.data1
    let twoImageList=ele.data2
    let threeImageList=ele.data3
    let fourImageList=ele.data4
    var lunbo=document.querySelectorAll('.swiper-slide')
colourChoose.forEach((ele1,index1)=>{
    ele1.onclick=function(){
        if(index1===0){
            colour.innerHTML=` <img src="${shouJiDaTu[0].imgUrl}" alt="">`
        oneImageList.forEach((ele,index)=>{
        lunbo[index].innerHTML=`<div class="swiper-slide"><img src="${ele.imgUrl}" alt=""></div>`
        })
    }else if(index1===1){
        colour.innerHTML=` <img src="${shouJiDaTu[1].imgUrl}" alt="">`
        twoImageList.forEach((ele,index)=>{
            lunbo[index].innerHTML=`<div class="swiper-slide"><img src="${ele.imgUrl}" alt=""></div>`
            })
    }else if(index1===2){
        colour.innerHTML=` <img src="${shouJiDaTu[2].imgUrl}" alt="">`
        threeImageList.forEach((ele,index)=>{
            lunbo[index].innerHTML=`<div class="swiper-slide"><img src="${ele.imgUrl}" alt=""></div>`
            })
    }else if(index1===3){
        colour.innerHTML=` <img src="${shouJiDaTu[3].imgUrl}" alt="">`
        fourImageList.forEach((ele,index)=>{
            lunbo[index].innerHTML=`<div class="swiper-slide"><img src="${ele.imgUrl}" alt=""></div>`
            })
    }
    }
})
}
let left_main=document.querySelector('.left_main')
let xiDing_xiangQing=document.querySelector('.xiDing_xiangQing')
window.onscroll=function(){
    let top=document.documentElement.scrollTop
    if(top>=425){
        left_main.classList.add('xiding')
        left_main.classList.remove('xiding_1')
    }else{
        left_main.classList.remove('xiding')
    }
    if(top>=1100){
        left_main.classList.remove('xiding')
        left_main.classList.add('xiding_1')
    }
    if(top>=2100){
        xiDing_xiangQing.style="position:fixed;top:30px;left:50%;transform:translate(-50%,-50%);"
    }else{
        xiDing_xiangQing.style="position:static"
    }
}
//-------商品详情下吸顶--------//

     
let xiDing_xiangQing_li=document.querySelectorAll('.xiDing_xiangQing li')

    xiDing_xiangQing_li.forEach(function(ele,li){
       ele.onclick=function(){
        for(i=0;i<4;i++){
           li[i].classList.remove('border_b')
            console.log(li)
        }
        ele.classList.add('border_b')
       }
    })
//-------商品介绍很多图---------//
let kaiguan=true
let commodity_details=document.querySelector('.commodity_details')
let icon=document.querySelector('.commodity_details .iconfont')
let Figure_bed_one=document.querySelector('.Figure_bed_one')
commodity_details.onclick=function(){
    if(kaiguan){
        Figure_bed_one.classList.add('off') 
        icon.classList.remove('icon-rising')
        icon.classList.add('icon-all1')
        kaiguan=false
    }else{
        icon.classList.add('icon-rising')
        icon.classList.remove('icon-all1')
        Figure_bed_one.classList.remove('off')
        kaiguan=true
    }
}

ajax({
    url: '../php/lotsOfDaTu.php',
    type: 'post',
    success(res) { 
        var obj=JSON.parse(res)
        lotsOfImg(obj.data)
        }
    })
function lotsOfImg(imglist){
    imglist.forEach(function(ele,index){
        Figure_bed_one.innerHTML+=`<img src="${ele.imgUrl}" alt="">`
    })
}
//数据库取出分类预渲染
ajax({
    url: '../php/phoneMessage.php',
    type: 'post',
    success(res) {
        var obj=JSON.parse(res)
        console.log(obj.data)
        leixing(obj.data)
        
        }
    })
    let oModel=document.querySelectorAll('.model div')
    function leixing(type){
        for(i=1;i<4;i++){
            oModel[i-1].innerHTML=type[i].name
        }
    }
//获取内存区的两个块
    let oCapacitySelect=document.querySelectorAll('.capacitySelect div')
//获取总价格
    let totalPrice=document.querySelector('.totalPrice')
    //定义一个全局变量money
    let money=0
    oCapacitySelect[0].onclick=function(){
        this.style.border='2px solid rgb(62, 62, 255)'
        oCapacitySelect[1].style.border='2px solid rgb(0,0,0)'
        money=7999
        console.log(money);
        totalPrice.innerHTML=` 总价格:￥${money}`
    }
    oCapacitySelect[1].onclick=function(){
        oCapacitySelect[0].style.border='2px solid rgb(0,0,0)'
        this.style.border='2px solid rgb(62, 62, 255)'
        money=0
        money=8999
        console.log(money);
        totalPrice.innerHTML=` 总价格:￥${money}`
    }







